<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="false">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row :gutter="48">
          <a-col :span="24">
            <a-form-model-item label="款项名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="paymentNodeName">
              <a-input :disabled="autoFieldDisabled" v-model="model.paymentNodeName"
                       placeholder="请输入款项名称"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="应收款金额(元)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="paymentMoney">
              <a-input-number :disabled="autoFieldDisabled" :max="999999999" :min="0" :precision="2"
                              v-model="model.paymentMoney" placeholder="请输入应收金额(元)" style="width: 100%"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="实收款金额(元)" :labelCol="labelCol" :wrapperCol="wrapperCol"
                               prop="realCollectionPaymentMoney">
              <a-input-number :disabled="formDisabled" :max="999999999" :min="0" :precision="2"
                              v-model="model.realCollectionPaymentMoney" placeholder="请输入实收金额(元)"
                              style="width: 100%"
                              @keyup.enter="handleRealCollectionPaymentMoneyChange"
                              @blur="handleRealCollectionPaymentMoneyChange"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="管理费(元)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="manageMoney">
              <a-input-number :disabled="autoFieldDisabled" :max="999999999" :min="0" :precision="2"
                              v-model="model.manageMoney" placeholder="请输入管理费(元)" style="width: 100%"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol"
                               prop="remark">
              <a-textarea :disabled="formDisabled" :max-length="500" v-model="model.remark"
                          rows="6" placeholder="请输入备注"/>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

import SelectUserByDep from '@/views/scy/components/SelectUserByDep'
import SelectTeamInput from '@/views/scy/components/SelectTeamInput'
import SelectCompanyInput from '@/views/scy/components/SelectCompanyInput'
import SelectCustomerInput from '@/views/scy/components/SelectCustomerInput'
import SelectProjectInput from '@/views/scy/components/SelectProjectInput'
import SelectTaskFileInput from '@/views/scy/components/SelectTaskFileInput'
import {mapGetters} from 'vuex'
import SelectProjectTaskInput from '@/views/scy/components/SelectProjectTaskInput.vue';

export default {
  name: 'ErpAuditLitigationDtForm',
  components: {
    SelectProjectTaskInput,
    SelectUserByDep,
    SelectTeamInput,
    SelectCompanyInput,
    SelectCustomerInput,
    SelectProjectInput,
    SelectTaskFileInput
  },
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data() {
    return {
      flag: false,
      model: {},
      labelCol: {},
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 24},
      },
      confirmLoading: false,
      validatorRules: {
        realCollectionPaymentMoney: [
          {required: true, message: '请输入实收款金额!'},
        ],
        manageMoney: [
          {required: true, message: '请输入管理费!'},
        ]
      },
      url: {},
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    },
    // 带出不可编辑
    autoFieldDisabled() {
      return true;
    },
  },
  created() {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model));
  },
  methods: {
    ...mapGetters(['userInfo']),
    add() {
      this.modelNew = {}
      this.edit(this.modelDefault, '1');
    },
    edit(record) {
      this.$refs.form.resetFields();
      this.model = Object.assign({}, record);
      this.visible = true;
    },
    submitForm() {

      const that = this;
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          let data = JSON.stringify(that.model)
          that.$emit('ok', JSON.parse(data));
        }
      })
    },
    // 修改实收 自动计算管理费
    handleRealCollectionPaymentMoneyChange() {
      let value = this.model.realCollectionPaymentMoney
      console.log("实收款金额:", value)
      if (value != null) {
        let manageMoney = value * 0.2;
        this.$set(this.model, 'manageMoney', manageMoney.toFixed(2))
      } else {
        this.$set(this.model, 'manageMoney', null)
      }
    }
  }
}
</script>
